<template>
	<a-popover placement="bottom">
		<template slot="content">
			<div class="flex flex-align-center">
				<i class="dot"></i>
				<span class="text">农场总数</span>
				<span class="num">{{ priceFormat(item.farmCount, 0) }}个</span>
			</div>
			<div class="flex flex-align-center">
				<i class="dot "></i>
				<span class="text">抵押牛总数</span>
				<span class="num">{{ priceFormat(item.mortgageNum, 0) }}头</span>
			</div>
			<div class="line"></div>
			<div class="flex flex-align-center">
				<i class="dot green"></i>
				<span class="text">总授信金额</span>
				<span class="num">{{ priceFormat(item.creditAmount, 2) }}元</span>
			</div>
			<div class="flex flex-align-center">
				<i class="dot orange"></i>
				<span class="text">总用信金额</span>
				<span class="num">{{ priceFormat(item.useAmount, 2) }}元</span>
			</div>
			<div class="flex flex-align-center">
				<i class="dot purple"></i>
				<span class="text">总评估金额</span>
				<span class="num">{{ priceFormat(item.evaluationAmount, 2) }}元</span>
			</div>
			<div class="flex flex-align-center">
				<i class="dot blue"></i>
				<span class="text">总抵押金额</span>
				<span class="num">{{ priceFormat(item.mortgageAmount, 2) }}元</span>
			</div>
		</template>
		<template slot="title">
			<div class="title" @click="gotoSubDeptName()">{{ item.subDeptName }}</div>
		</template>
		<div
			class="point"
			:class="[extendClass]"
			:style="{
				top: item.point.top,
				left: item.point.left
			}"
		></div>
	</a-popover>
</template>

<script>
import { priceFormat } from '@/utils/base';
export default {
	data() {
		return {
			priceFormat
		};
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		extendClass() {
			return 'point' + (parseInt(Math.random() * 4) + 1);
		},
		gotoSubDeptName(name) {
			/* 跳转到支行台账页面 */
		}
	}
};
</script>

<style scoped lang="less">
.title {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	line-height: 23px;
	color: #24292e;
	padding: 10px 0;
	// cursor: pointer;
}
.line {
	height: 1px;
	background: rgba(232, 232, 232, 0.39);
	margin-top: 10px;
	margin-bottom: 3px;
}
.text {
	font-size: 16px;
	line-height: 20px;
	color: #24292e;
	margin-left: 10px;
	display: block;
	width: 8em;
}
.dot {
	width: 14px;
	height: 14px;
	background: #33d4da;
	border: 1px solid #ffffff;
	border-radius: 50%;
	display: block;
	&.green {
		background: #33da44;
	}
	&.orange {
		background: #ff9b4e;
	}
	&.purple {
		background: #d253ff;
	}
	&.blue {
		background: #704eff;
	}
}
.num {
	font-size: 18px;
	font-weight: bold;
	color: #06706c;
}

.point,
.point::before,
.point::after {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	content: '';
}
.point::before {
	animation: scale 2s infinite;
}
.point::after {
	animation: scale2 2s infinite;
}
.point2::before,
.point2::after {
	animation-delay: 0.5s;
}
.point3::before,
.point3::after {
	animation-delay: 0.8s;
}
.point4::before,
.point4::after {
	animation-delay: 1s;
}
@keyframes scale {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes scale2 {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	100% {
		transform: scale(4);
		opacity: 0;
	}
}
.point {
	background: #ffb453;
}
.point::before,
.point::after {
	background: rgba(255, 246, 235, 1);
	z-index: -1;
}
/* 
.point2,
.point2::before,
.point2::after {
	background-color: rgba(0, 221, 254, 0.9);
}
.point3,
.point3::before,
.point3::after {
	background-color: rgba(1, 88, 255, 0.9);
}
.point4,
.point4::before,
.point4::after {
	background-color: rgba(135, 229, 8, 0.9);
} */
</style>
<style>
.ant-popover-title {
	border-bottom: none;
}
</style>
